<template>
  <view style="padding-top: 100rpx; padding: 30rpx;">
    <!-- 输入值区域：绑定父组件的title，传递给compA -->
    <view class="text-area">
      <text>输入值：</text>
      <input 
        type="text" 
        v-model="title" 
        style="color: red; border: 1rpx solid #ccc; padding: 8rpx; margin-left: 10rpx; flex: 1;" 
        placeholder="请输入内容传递给compA"
      />
    </view>

    <!-- 回传值区域：展示compB回传的数据 -->
    <view class="text-area" style="margin: 20rpx 0;">
      <text>回传值：</text>
      <input 
        type="text" 
        :value="callBackValue" 
        style="color: #1e90ff;; border: 1rpx solid #ccc; padding: 8rpx; margin-left: 10rpx; flex: 1;" 
        readonly 
        placeholder="compB回传的值将显示在这里"
      />
    </view>

    <!-- 引入compA：传递title + 监听compA的事件 -->
    <compA 
      :intent="title" 
      @sendToB="handleCompAData" 
      style="margin: 20rpx 0; padding: 20rpx; background: #f5f5f5; border-radius: 8rpx;" 
    />

    <!-- 引入compB：传递compA的数据 + 监听compB的回调 -->
    <compB 
      :result="compAData"  
      @sendCallback="handleCompBCallback"  
      style="padding: 20rpx; background: #f0f8ff; border-radius: 8rpx;" 
    ></compB>
  </view>
</template>

<script>
// 导入组件时名称改为compA和compB
import compA from '../../components/compA.vue'
import compB from '../../components/compB.vue'

export default {
  components: {
    compA,  // 注册compA组件
    compB   // 注册compB组件
  },
  data() {
    return {
      title: '',        // 输入框的值，传给compA
      compAData: '',    // 存储compA传递的数据，转发给compB
      callBackValue: '' // 存储compB回传的数据，用于展示
    }
  },
  methods: {
    // 接收compA传递的数据，转发给compB
    handleCompAData(data) {
      this.compAData = data
      console.log('父组件接收compA的数据：', data)
    },
    // 接收compB的回传数据
    handleCompBCallback(data) {
      this.callBackValue = data
      console.log('父组件接收compB的回传数据：', data)
    }
  }
}
</script>

<style scoped>
.text-area {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
</style>